/* 主页 */

/* banner区域 */
.banner{
    width: 100%;
    height: 714px;
    background: url(../img/banner.jpg) no-repeat center;
    background-size: cover;
}
.banner-c{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
.banner .banner-c .dot{
    box-sizing: border-box;
    height: 14px;
    position: absolute;
    bottom: 19px;
    left: 50%;
    transform: translateX(-50%);
}
.banner .banner-c .dot span{
    float: left;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #fff;
    /* 提前设置边框 */
    border: 3px solid transparent;
    /* 裁剪内容区 让背景色 只 蔓延 到 内容区 */
    background-clip: content-box;
}
.banner .dot span:nth-child(1){
    border:3px solid #668aca;
}
.banner .dot span:nth-child(5){
    margin-right: 0;
}
.banner .banner-c span:hover{
    background-color: #668aca;
    border-color: #fff;
}




/* project */

.project{
    width: 100%;
    /* 高度由内容撑开 但是我自己写好像会炸 */
    /* height: 679px; */
}
.project-c{
    width: 1200px;

    /* height: 100%; */
    /* background-color: pink; */
    margin: 0 auto;
}

/* title 左上标题  */
/* 这里不加project 前缀是因为后面几个页面可以复刻 */
.title{
    width: 100%;
    height: 51px;
    position: relative;
    padding-top: 120px;
}
.title p:nth-child(1){
    font-size: 30px;
    height: 28px;
    line-height: 28px;
    margin-bottom: 6px;
}
.title p:nth-child(2){
    font-size: 12px;
    height: 10px;
    line-height: 10px;
    margin-bottom: 6px;
    color: #767676;
}
.title::after{
    content: '';
    display: block;
    width: 60px;
	height: 1px;
	background-color: #a1a1a1;
}
.title span{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 300px;
	height: 1px;
	background-color: #a1a1a1;
}



/* head  中间标题*/

/* head盒子  p-nav是ul  p-item是li line是竖线*/
/* .project .head{
    
} */
.project .p-nav{
    /* 设置宽度有内容撑开 */
    width:fit-content;
    margin: 0 auto;
    margin-top: 61px;
}
.project .p-item{
    float: left;
    width: 97px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    /* background-color: orange; */
}
.project .p-nav .active::after{
    opacity: 1;
}
.project .active a{
    font-size: 16px;
    color: #668aca;
}
.project .line{
    float: left;
    width: 1px;
	height: 8px;
	background-color: #b5b5b5;
    margin-top: 5px;
}
.project .p-item::after{
    content: '';
    display: block;
    width: 12px;
	height: 1px;
	background-color: #668aca;
    margin: 0 auto;
    margin-top: 3px;
    opacity: 0;
}

/* 中间导航的 hover状态 */
.project .p-item:hover a{
    font-size: 16px;
    color: #668aca;
}
.project .p-item:hover::after{
    opacity: 1;
}


/* 下面三个图片 */
.project .foot{
    margin-top: 54px;
}
/* 图片 */
.project .sange{
    position: relative;
    float: left;
    width: 360px;
    height: 270px;
    /* background-color: orange; */
    margin-right: 60px;
    border-radius: 8px;
    /* 超出部分隐藏 */
    overflow: hidden;
    

}
.project .sange .bg{
    height: 180px;
    background: url(../img/bg-1.jpg) no-repeat center;
    background-size: 100% 100%;
    border-radius: 8px;
    overflow: hidden;
}
/* 我怎么顺序出问题了 */
/* 文字 */
.project .foot .sange p{
    padding: 0 50px;
}
.project .foot .sange p:nth-child(2){
    height: 14px;
    line-height: 14px;
    margin-top: 28px;
}
.project .foot .sange p:nth-child(3){
    line-height: 13px;
    height: 13px;
    font-size: 12px;
    margin-top: 7px;
}
/* 小箭头 */
.project .foot .bg-pg{
    width: 30px;
    height: 30px;
    background: url(../img/jiantou.png) no-repeat center;
    background-size: 100% 100%;
    position:absolute;
    right: 50px;
    bottom: 30px;
}
/* 蒙层 */
.project .foot .mask{
    box-sizing: border-box;
    padding: 0 50px;
    position: absolute;
    top: 0;
    left: 0;
    width: 360px;
    height: 270px;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    transform: translateY(-100%);
    transition: 0.4s;
}
.project .mask .text-1{
    margin-top: 58px;
    height: 15px;
    line-height: 15px;
}
.project .mask .text-2{
    margin-top: 4px;
    height: 12px;
    line-height: 12px;
    font-size: 12px;
}
.project .mask .text-3{
    font-size: 12px;
    line-height: 22px;
    margin-top: 14px;
}
.project .mask .bg-pg-a{
    display: block;
    position: absolute;
    right: 50px;
    bottom: 60px;
    width: 30px;
    height: 30px;
    background: url(../img/jiantou.png) no-repeat center;
    background-size: 100% 100%;
}
/* hover时  蒙层出现*/
.project .sange:hover .mask{
    opacity: 1;
    transform: translateY(0);
}
.project .sange:hover .bg{
    width: 360px;
    height: 270px;
    background: url(../img/bg-1.jpg) no-repeat center;
    background-size: 100% 100%;
}
.project .sange:hover .bg-pg{
    opacity: 0;
}





/* <!-- 产品中心 -->probuct */
.probuct{
    width: 100%;
}
.probuct-c{
    width: 1200px;
    margin: 0 auto;
    /* background-color: paleturquoise; */
}

/* 带图导航 */
.probuct .wuge{
    width: fit-content;
    height: 114px;
    margin: 0 auto;
    margin-top: 54px;
    /* background-color: indigo; */
}
.probuct .wuge .box{
    /* width: fit-content; */
    float: left;
    width: 164px;
    height: 86px;
    margin-right: 79px;
    /* background-color: #668aca; */
    /* 把下面的span居中 */
    text-align: center;
}
.probuct .wuge .tupian{
    width: 124px;
    height: 66px;
    margin: 10px auto;
    /* 弹性盒子 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
}

/* 两个span标签  我居然选不到 */
.probuct .wuge .box .a{
    font-size: 14px;
}
.probuct .wuge .box .b{
    font-size: 12px;
}
.probuct .wuge .box::after{
    content: '';
    display: block;
    width: 16px;
	height: 1px;
	background-color: #668aca;
    margin: 0 auto;
    opacity: 0;
}

/* 第一个不一样的样式 */
.probuct .wuge .active{
    background-color: #668aca;
}
.probuct .wuge .active .a{
    font-size: 16px;
    color: #668aca;
}
.probuct .wuge .active .b{
    font-size: 14px;
    color: #668aca;
}
.probuct .wuge .active::after{
    opacity: 1;
}
/* hover时 */
.probuct .wuge .box:hover{
    background-color: #668aca;
}
.probuct .wuge .box:hover .a{
    font-size: 16px;
    color: #668aca;
}
.probuct .wuge .box:hover .b{
    font-size: 14px;
    color: #668aca;
}
.probuct .wuge .box:hover::after{
    opacity: 1;
}

/* 下面六个图 */
.probuct .liuge{
    /* background-color: pink; */
}
.probuct .liuge .top{
    /* transition: 0.4s; */
    margin-top: 100px;
    overflow: hidden;
}
.probuct .liuge .top-1{
    position: relative;
    float: left;
    width: 360px;
    height: 320px;
    border-radius: 8px;
    /* background-color: rosybrown; */
    margin-right: 60px;
    
}
.probuct .liuge .top-2{
    width: 302px;
    height: 302px;
    margin: 0 auto;
    margin-top: 29px;
}
.probuct .liuge .top-2 img{
    display: block;
    width: 302px;
    height: 302px;
    background-size: cover;
}
.probuct .liuge .text{
    font-size: 16px;
    height: 40px;
    line-height: 20px;
    margin-left: 92px;
}

/* 蒙层 */
.probuct .liuge .top .mask{
    opacity: 0;
	width: 360px;
	height: 320px;
	background-color:rgba(0, 0, 0, .5);
	border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    /* transform: translateY(-100%); */
    transition: 0.4s;

}
.probuct .liuge .top .number{
    font-size: 30px;
    height: 25px;
    line-height: 25px;
    color: #f8f8f8;
    position: absolute;
    top: 131px;
    left: 84px;
}
.probuct .liuge .top .mask span{
    display: block;
    width: 80px;
	height: 1px;
	background-color: #f8f8f8;
    position: absolute;
    top: 154px;
    left: 0;
}
.probuct .top .chinese{
    color: #f8f8f8;
    font-size: 16px;
    position: absolute;
    top: 171px;
    left: 69px;
}

/* hover */
.probuct .liuge .top-1:hover .mask{
    opacity: 1;
    /* transform: translateY(0); */
}
.probuct .liuge .top-1:hover .text{
    opacity: 0;
}

/* 上下间距 */
.probuct .liuge .jianju{
    margin-top: 50px;
}

                        /* 产品中心 servict */
.servict{
    width: 100%;
}
/* 上标题 */
.servict-top{
    width: 1200px;
    margin: 0 auto;
}
/* 下背景 */
.servict-bottom{
    width: 100%;
    height: 700px;
    background: url(../img/s-1.jpg) no-repeat center; 
    background-size:cover;
    margin-top: 60px;
}
/* 下版心 */
.servict .servict-bottom-c{
    position: relative;
    width: 1200px;
    height: 700px;
    margin: 0 auto;
}
.servict .servict-bottom-c .title-s{
    font-size: 30px;
    height: 23px;
    line-height: 23px;
    padding-top: 150px;
    color: #fff;
}
.servict .servict-bottom-c .text-s{
    height: 18px;
    line-height: 18px;
    font-size: 14px;
    color: #fff;
    padding-top: 24px;
}
/* 四列表 */
.servict .servict-bottom-c .s-list{
    height: 150px;
    margin: 0 auto;
    /* background-color: pink; */
    position: absolute;
    bottom: 149px;
    right: 0;
}
.servict .s-list .s-item{
    float: left;
    width: 250px;
    height: 150px;
    border: 1px solid #fff;
    border-right: none;
    transition: 0.4s;
}
.servict .s-item:nth-child(4){
    border-right: 1px solid #fff;
}
/* 列表里面的文字 */
.servict .s-list .s-item-c{
    text-align: center;
    padding-top: 47px;
}
.servict .s-list .s-item-c p:nth-child(1){
    font-size: 16px;
    color: #fff;
}
.servict .s-list .s-item-c p:nth-child(2){
    width: 30px;
	height: 1px;
	background-color: #ffffff;
    margin: 13px auto;
} 
.servict .s-list .s-item-c p:nth-child(3){
    font-size: 14px;
    color: #fff;
} 

/* hover */
.servict .s-item:hover{
    transform: scale(1.1);
    background-color: #668aca;
    border: 0px;
}



                /* 新闻咨询 news */
.news{
    width: 100%;
}
.news-c{
    width: 1200px;
    margin: 0 auto;
    /* background-color: pink; */
}
/* 左边一大块 */
.news .boxs{
    margin-top: 60px;
}
.news .boxs .left{
    float: left;
    width: 570px;
    height: 570px;
    margin-right: 60px;
    /* background-color: black; */
}
/* 上图 */
.news .left .shang{
    overflow: hidden;
    width: 570px;
    height: 270px;
    background: url(../img/n-1.jpg) no-repeat center;
    background-size: cover;
    position: relative;
}
/* 上图的蒙层 */
.news .shang .mask{
    width: 570px;
	height: 90px;
	background-color: rgba(0, 0, 0, .5);
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    transition: 0.4s;
}
.news .shang .mask p{
    margin-left: 50px;
}
.news .shang .mask p:nth-child(1){
    font-size: 16px;
    height: 17px;
    line-height: 17px;
    color: #fff;
    margin-top: 11px;
}
.news .shang .mask p:nth-child(2){
    font-size: 12px;
    height: 17px;
    line-height: 17px;
    color: #fff;
    margin-top: 14.5px;
}
.news .shang .mask .jiantou{
    width: 30px;
    height: 30px;
    background: url(../img/jiantou.png) no-repeat center;
    background-size:cover;
    position: absolute;
    right: 50px;
    bottom: 12px;
}
/* 上图的hover */
.news .left .shang:hover .mask{
    transform: translateY(0);
}
/* 下图 */
.news .left .xia{
    margin-top: 30px;
}
.news .xia .zuo{
    float: left;
    width: 270px;
    height: 270px;
    background: url(../img/n-2.jpg) no-repeat center;
    background-size: cover;
    margin-right: 30px;
}
.news .xia .you{
    float: right;
    width: 270px;
    height: 270px;
    background: url(../img/n-3.jpg) no-repeat center;
    background-size: cover;
}
/* 右边一大块 */
.news .boxs .right{
    float: right;
    width: 570px;
    height: 570px;
    background: url(../img/n-4.jpg);
}


            /* 关于简设 */
.about{
    width: 100%;
}
.about-c{
    width: 1200px;
    margin: 0 auto;
}
.about .about-c .xiamian{
    width: 100%;
    height: 300px;
    margin: 60px auto;
}
.about .xiamian .bg{
    float: left;
    margin-right: 29px;
    width: 500px;
    height: 300px;
    background: url(../img/about-1.jpg) no-repeat center;
    background-size: cover;
}
.about .xiamian .text{
    float: right;
    width: 670px;
    height: 300px;
}
.about .xiamian .text p:nth-child(1){
    display: inline-block;
    margin-top: 32px;
    height: 21px;
    line-height: 21px;
}
.about .xiamian .text p:nth-child(2){
    display: inline-block;
    margin-top: 34px;
    height: 21px;
    line-height: 21px;
}
.about .xiamian .text p:nth-child(3){
    display: inline-block;
    margin-top: 34px;
    height: 21px;
    line-height: 21px;
}